<template>
  <view class="bjys2">
    <view @click="navigateBtn()" class="play_back">
      <image src="@/static/img/play_back.png" mode=""></image>
    </view>
    <view class="title">
      分享
      <image src="@/static/img/share.png" @click="copy()"></image>
    </view>
    <view class="content" v-if="zthead">
      <view class="swiperItem">
        <swiper class="swiper3" :duration="1000" circular :current="current" previous-margin="175rpx"
          next-margin="175rpx" @change="change">
          <swiper-item v-for="(item,index) in zthead" :key="index">
            <view class="swiper3_item" :class="current==index?'swiper2_active':''">
              <image class="" :src="'https://www.tmtv777.com/' + item.pic" mode="widthFix"></image>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="button" @click="shengchengBtn()">点击生成海报</view>
    </view>
    <view class="button1">登录后可获得专属推广码哦！</view>
    <div class="info-content">
      <p class="title">
        <image src="@/static/img/fx.png" mode=""></image>
        推广链接</p>
      <p id="textBox">{{ myshare ? shareurl : shareurlno}}</p>
    </div>
    <div class="info-content">
      <p class="title"><image src="@/static/img/fx.png" mode=""></image>注册任务</p>
      <p>{{ tishiList[2] }}</p>
    </div>
    <div class="info-content">
      <p class="title"><image src="@/static/img/fx.png" mode=""></image>推广奖励</p>
      <p>{{ tishiList[3] }}</p>
    </div>
    <!-- 分享海报 -->
    <div class="ypl-flex" v-if="haibao">
      <div class="invitePosterPage flex">
        <div>
          <div class="van-popup">
            <div class="oter">
              <image :src="'https://www.tmtv777.com/'+zthead[current].pic" class="poster-bg" mode="widthFix"></image>
              <view class="shareText">{{ myshare ? '【邀请码：'+myshare+'】' : '' }}</view>
              <view class="code">
                <ayQrcode ref="qrcode" :modal="modal_qr" :url="url" :height="87" :width="87" />
              </view>
              <div class="txt">截屏保存图片(如二维码失败请点击右上角复制推广链接)</div>
              <button class="gbhb" @click="gbhb">关闭</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
  import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"

  export default {
    components: {
      ayQrcode,
    },
    data() {
      return {
        zthead: [],
        haibao: false,
        current: 0,
        modal_qr: false,
        url: '', // 要生成的二维码值
        tishiList: [],
        shareurl: '',
        posterDataUrl: '',
        myshare: '',
        shareurlno: ''
      }
    },
    onLoad() {
      // 展示二维码
      this.myshare = uni.getStorageSync('share')
      uni.showModal({
        title: '提示',
        content: '如背景图显示不全或加载不出来请重试几次，如切换背景图未加载出来请使用第一张！还是加载不出来请点击右上角复制推广链接！'
      })
      uni.showLoading({
        title: '加载中'
      })
      this.$http.sharepic().then(res => {
        if (res.code == 200) {
          this.zthead = res.data.sharepic;
          this.shareurlno = res.data.title[0] + res.data.title[4]
          this.tishiList = res.data.title;
          this.shareurl = '我的邀请码是' + this.myshare + ',' + res.data.title[1] + res.data.title[4];
          this.url = res.data.title[4];
          uni.hideLoading();
        }
      })
    },
    methods: {
      navigateBtn() {
        uni.navigateBack();
      },
      shengchengBtn() {
        this.haibao = true;
        this.modal_qr = true;
        // uni.showLoading()
        setTimeout(() => {
          // uni.hideLoading()
          this.$refs.qrcode.crtQrCode()
        }, 50)
      },
      gbhb() {
        this.haibao = false;
      },
      copy() {
        let value = this.tishiList[4] || 'https://www.tmtv777.com/#/index';
        //提示模板
        uni.showModal({
          content: value, //模板中提示的内容
          confirmText: '复制内容',
          showCancel: false,
          success: () => { //点击复制内容的后调函数
            //uni.setClipboardData方法就是讲内容复制到粘贴板
            uni.setClipboardData({
              data: value, //要被复制的内容
              success: () => { //复制成功的回调函数
                uni.showToast({ //提示
                  title: '复制成功'
                })
              }
            });
          },
        })
      },
      change(e) {
        let num = e.detail.current;
        this.current = num;
      }
    }
  }
</script>

<style lang="less">
  .swiper2_active {
    transform: scale(1.4);
  }

  .bjys2 {
    padding-top: 50rpx;
    padding-bottom: 20rpx;
    height: 170rpx;
    top: 0;
    position: absolute;
    width: 100%;
    background: linear-gradient(90deg, #bdc3c7, #2c3e50);
    border-bottom-right-radius: 30rpx;
    border-bottom-left-radius: 30rpx;

    .title {
      position: relative;
      font-size: 32rpx;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;

      image {
        // position: absolute;
        // right: 30rpx;
        width: 50rpx;
        height: 50rpx;
      }
    }
  }

  .content {
    background-color: black;
    padding-bottom: 15rpx;
  }

  .swiperItem {
    position: relative;
    width: 100%;
    min-height: 300rpx;
    margin-bottom: 30rpx;
  }

  .swiper3 {
    position: relative;
    width: 100%;
    height: 400rpx;
    display: flex;
    align-items: center;

    swiper-item {
      text-align: center;

      .swiper3_item {
        position: absolute;
        top: 70rpx;
        bottom: 70rpx;
        left: 70rpx;
        right: 70rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        transition: all 0.5s ease;
        overflow: hidden;
        border-radius: 40rpx;
      }
    }
  }

  .button {
    height: 1.6rem;
    width: 40%;
    background: #6496ca;
    border-radius: 20px;
    text-align: center;
    padding: 2px;
    color: #fff;
    line-height: 1.6rem;
    margin: auto;
    font-size: 15px;
  }

  .button1 {
    height: 80rpx;
    width: 100%;
    background: linear-gradient(90deg, #bdc3c7, #2c3e50);
    font-size: 30rpx;
    line-height: 80rpx;
    font-weight: bold;
    text-align: center;
    color: #FFFFFF;
  }

  .info-content {
    border-bottom: 10px solid #f7f5db;
    font-size: 16px;
  }

  .info-content .title {
    margin-bottom: 5px;
    color: #edae2d;
    font-weight: 900;
    font-size: 1.2rem;
    padding: 0 10px 0 10px;
  }

  .info-content image {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    // position: relative;
    // top: 6px;
  }

  .info-content p {
    padding: 10px;
  }

  .info-content:last-child {
    padding-bottom: 50px;
    border-bottom: none;
  }

  .ypl-flex {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    text-align: center;
    margin: 0 auto;
    vertical-align: bottom;
    width: 94%;
  }

  .invitePosterPage {
    width: 100%;
    text-align: center;
  }

  .invitePosterPage>img {
    width: 100%;
    text-align: center;
    vertical-align: bottom;
    /* height: 600px; */
  }

  .flex {
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }

  .oter {

    width: 100%;
    margin: 0 auto;
    max-width: 414px;
    position: relative;

    image {
      width: 80%;
      vertical-align: bottom;
      border-radius: 30px;
    }

    .shareText {
      position: absolute;
      top: 500rpx;
      left: 50%;
      transform: translateX(-50%);
      color: #FFFFFF;
    }

    .code {
      // background-color: #FFFFFF;
      padding: 10rpx;
      position: absolute;
      top: 600rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }


  .flex-row {
    width: 80%;
    margin: 0 auto;
    position: fixed;
    bottom: -2000px;
  }

  .flex-row>img {
    width: 100%;
    vertical-align: bottom;
  }

  .qr {
    width: 8rem;
    height: 2rem;
  }

  .qqqqq {
    margin: 0 anto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: .5rem;
  }

  .txt {
    font-size: .8rem;
    color: white;
    padding-top: 10px;
  }

  .qqqqq .title {
    margin-bottom: .6rem;
    color: #fff;
    font-size: .8rem;
    padding: .3rem;
  }

  .title-img {
    width: 70%;
    height: 2rem;
    margin-bottom: .6rem;
  }

  .van-popup--center {
    width: 80%;
  }

  .top>div {
    height: 1.6rem;
    width: 40%;
    background: #6496ca;
    border-radius: 20px;
    text-align: center;
    padding: 2px;
    color: #fff;
    line-height: 1.6rem;
    margin: auto;
    font-size: 15px;
  }

  .van-popup {
    background-color: transparent;
    position: fixed;
    z-index: 2000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    background-color: #000000cc;
    height: 100%;
    padding-top: 40%;
  }

  .xllb {
    background: linear-gradient(90deg, #bdc3c7, #2c3e50);
    height: 250px;
    color: white;
    padding-top: 50px;
  }

  .swiper {
    height: 165px;
    width: 100%;
    padding-top: 35px;
  }

  .swiper-slide {
    -webkit-transform: scale(0.83);
    transform: scale(0.83);

  }

  .swiper-slide-active,
  .swiper-slide-duplicate-active {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  .swiper-slide img {
    width: 100%;
    height: 150px;
    border-radius: 10px;
    display: block;
    object-fit: cover;
  }

  .hd_title {
    height: 30px;
    width: 80%;
    text-align: center;
    position: absolute;
    line-height: 30px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    padding: 0 40px;
  }

  .gbhb {
    background-color: #af4c4c;
    border: none;
    color: white;
    padding: 5px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 30px;
    margin-top: 10px;
  }

  .info-content {
    border-bottom: 10px solid #f7f5db;
    font-size: 16px;
  }

  .info-content .title {
    margin-bottom: 5px;
    color: #edae2d;
    font-weight: 900;
    font-size: 1.2rem;
    padding: 0 10px 0 10px;
  }

  .info-content image {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    // position: relative;
    // top: 6px;
  }

  .info-content p {
    padding: 10px;
  }

  .info-content:last-child {
    padding-bottom: 50px;
    border-bottom: none;
  }

  .foot_menu {
    display: none;
  }
</style>
